<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			body,
			div,
			dl,
			dt,
			dd,
			ul,
			ol,
			li,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			span {
				padding: 0;
				margin: 0;
			}
			body{
				padding-top: 2000px;
			}
			img {
				border: 0;
			}
			
			ol,
			ul {
				list-style: none;
			}
			
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-weight: normal;
			}
			
			.clearfix:after {
				visibility: hidden;
				display: block;
				font-size: 0;
				content: " ";
				clear: both;
				height: 0;
			}
			
			.clearfix {
				*zoom: 1;
			}
			/*j-sub-3 Strat*/
			
			.j-sub-3 {
				background-color: #0c5ce4;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				font-family: "microsoft yahei";
				-webkit-font-smoothing: antialiased;
			}
			
			.j-sub-3>.j-sub-3-warp {
				width: 1200px;
				margin: 0 auto;
				min-height: 700px;
				background: url(image/j-sub-3-bg.png) 0 0 no-repeat;
				-webkit-background-size: 100% 100%;
				-moz-background-size: 100% 100%;
				-o-background-size: 100% 100%;
				background-size: 100% 100%;
				position: relative;
				overflow: hidden;
			}
			/*进度条推送Start*/
			
			.warp-progress .warp-progress-text {
				font-weight: bold;
				color: #ffffff;
				height: 32px;
				line-height: 32px;
				position: absolute;
				top: -50px;
				cursor: pointer;
			}
			
			.warp-progress .warp-progress-text {
				height: 32px;
				line-height: 32px;
			}
			
			.warp-progress .warp-progress-text>.progress-text-1 {
				font-size: 20px;
				margin-right: 60px;
			}
			
			.warp-progress .warp-progress-text>.progress-text-2 {
				font-size: 18px;
				position: absolute;
				left: 75px;
				top: -1px;
			}
			
			.warp-progress .warp-progress-text>.progress-text-3 {
				width: 10px;
				height: 16px;
			}
			
			.warp-progress-items div {
				position: absolute;
				top: -200px;
				left: 0;
			}
			/*进度条推送End*/
			/*进度条*/
			
			.j-sub-3-warp>.warp-progress {
				width: 700px;
				position: absolute;
				left: 252px;
				top: 110px;
				z-index: 1;
			}
			
			.j-sub-3-warp>.warp-progress>.warp-progress-items {
				float: left;
				width: 200px;
				height: 6px;
				background-color: #15294a;
				margin-right: 12px;
				position: relative;
			}
			
			.j-sub-3-warp>.warp-progress>.warp-progress-items::before {
				content: "";
				display: block;
				width: 14px;
				height: 14px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				border: 4px solid #15294a;
				position: absolute;
				left: -13px;
				top: -4px;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				cursor: pointer;
				-webkit-transition: background-color 1s;
				-o-transition: background-color 1s;
				-moz-transition: background-color 1s;
				transition: background-color 1s;
			}
			
			.j-sub-3-warp>.warp-progress>.warp-progress-items i {
				display: block;
				height: 2px;
				background-color: #fff;
				margin-top: 2px;
				width: 0;
			}
			/*进度条动画*/
			
			@-webkit-keyframes next {
				0% {
					width: 0;
				}
				100% {
					width: 100%;
				}
			}
			
			@-moz-keyframes next {
				0% {
					width: 0;
				}
				100% {
					width: 100%;
				}
			}
			
			@-o-keyframes next {
				0% {
					width: 0;
				}
				100% {
					width: 100%;
				}
			}
			
			@keyframes next {
				0% {
					width: 0;
				}
				100% {
					width: 100%;
				}
			}
			
			.warp-progress-items.active::before {
				background-color: #FFFFFF;
			}
			
			.warp-progress-items.active i {
				-webkit-animation: next 5s linear both;
				-moz-animation: next 5s linear both;
				-o-animation: next 5s linear both;
				animation: next 5s linear both;
			}
			
			.warp-progress-items.stop i {
				-webkit-animation: none;
				-moz-animation: none;
				-o-animation: none;
				animation: none;
				width: 100% !important;
			}
			/*进度条End*/
			/*主要内容 Start*/
			
			.j-sub-3-warp>.warp-container {
				position: relative;
			}
			
			.j-sub-3-warp>.warp-container .container-page {
				float: left;
				width: 1200px;
				height: 700px;
				position: relative;
				color: #fff;
			}
			
			.j-sub-3-warp>.warp-container>.container-page>.container-page-hand {
				position: absolute;
				bottom: 0;
				left: 200px;
			}
			/*第一页 手机二维码*/
			
			.warp-container>.container-page>.container-page-wxewm {
				position: absolute;
				width: 120px;
				height: 120px;
				left: 332px;
				top: 305px;
				z-index: 2;
			}
			
			.warp-container>.container-page>.container-page-title {
				position: absolute;
				left: 700px;
				top: 800px;
			}
			
			.container-page>.container-page-title>p {
				font-weight: bold;
				font-size: 32px;
				margin-top: 30px;
				margin-bottom: 10px;
			}
			
			.container-page>.container-page-title>span {
				font-size: 20px;
			}
			
			.container-page>.container-page-title>span>i {
				font-style: normal;
				display: inline-block;
				padding: 0 2px 0 6px;
				line-height: 30px;
				text-align: center;
				background-color: #0136c0;
			}
			/*主要内容 End*/
		</style>
	</head>

	<body>
		<p></p>

		<div class="j-sub-3">
			<div class="j-sub-3-warp">
				<ul class="warp-progress">
					<li class="warp-progress-items">
						<i></i>
						<div class="warp-progress-text">
							<span class="progress-text-1">STEP1</span>
							<span class="progress-text-2">关注</span>
							<img class="progress-text-3" src="image/j-sub-3-jt.png" alt="" />
						</div>

					</li>
					<li class="warp-progress-items">
						<i></i>
						<div class="warp-progress-text">
							<span class="progress-text-1">STEP2</span>
							<span class="progress-text-2">订阅</span>
							<img class="progress-text-3" src="image/j-sub-3-jt.png" alt="" />
						</div>

					</li>
					<li class="warp-progress-items">
						<i></i>
						<div class="warp-progress-text">
							<span class="progress-text-1">STEP3</span>
							<span class="progress-text-2">推送</span>
							<img class="progress-text-3" src="image/j-sub-3-jt.png" alt="" />
						</div>

					</li>
				</ul>
				<div class="warp-container">
					<div class="container-page">
						<!--定位手机招标二维码 S-->
						<img class="container-page-wxewm" src="image/j-com-1-wx.png" alt="" />
						<!--定位手机招标二维码 E-->
						<img class="container-page-hand" ondragstart='return false;' src="image/j-sub-1-phone.png" alt="" />
						<div class="container-page-title">
							<p>扫码或搜索</p>
							<span>微信公众号<i>推送服务</i></span>
						</div>
					</div>
					<div class="container-page">
						<img class="container-page-hand" ondragstart='return false;' src="image/j-sub-2-phone.png" alt="" />
						<div class="container-page-title">
							<p>方法一：</p>
							<span>点击招标订阅，<i>输入关键词，</i></span><br />
							<span>选择信息类型、地域</span>
							<p>方法二：</p>
							<span>回复订阅关键词，<i>如：订阅税务局&nbsp;软件</i></span>
						</div>
					</div>
					<div class="container-page">
						<img class="container-page-hand" ondragstart='return false;' src="image/j-sub-3-phone.png" alt="" />
						<div class="container-page-title">
							<p>享受</p>
							<span>剑鱼招标订阅<i>推送服务</i></span>
						</div>
					</div>
				</div>
			</div>

		</div>
		<script src="lib/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//调用
				Carousel()
					function Carousel() {
						var falg = true;
						$(window).scroll(function() {
							/*元素距离顶部上面的距离*/
							var dH = $('.j-sub-3').offset().top - 700;//-700是元素自身的高度
							/*滚动条滚动的距离*/
							var wH = $(window).scrollTop();
							console.log(dH, wH)
							if(wH >= dH) {
								if(falg) {
									trclick()
									falg = false;
								}
							}
						})

						var liLength = $(".warp-progress li").length;
						var liWidth = $(".container-page").width();
						var t = null;
						/*初始化宽度*/
						$(".warp-container").css({
							width: liLength * liWidth
						})

						function trclick() {
							setTimeout(function() {
								$(".warp-progress-items").eq(0).trigger("click")
							}, 100)
						}
						$('.warp-progress-items').on('animationend', function() {
							$(this).addClass('active stop')
							if($(this).next().html() != undefined) {
								$(this).next().trigger("click");
							} else {
								$('.warp-progress-items').removeClass("active stop");
								trclick()
							};
						})
						$(".warp-progress-items").on("click", function() {
							var _this = $(this)

							$(".container-page").find(".container-page-title").stop(false, true).css({
								top: 800
							})

							$('.warp-progress-items').each(function(i) {
								if(i < $(_this).index()) {
									$(this).addClass("active stop");
								} else {
									$(this).removeClass('active stop')
								}
							})

							$(this).addClass('active');
							$(".container-page").stop(false, false).animate({
								left: -$(this).index() * liWidth
							}, 1000, function() {
								$(".container-page").find(".container-page-title").eq(_this.index()).stop(false, false).animate({
									top: 240
								}, 800)
							})
						})

						return false

					}
			})
		</script>
	</body>

</html>